<template>
  <div class="swiper">
    <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback" class="container">
      <!-- slides -->
      <swiper-slide style="    margin-right: 30px;" >
        <img src="https://ex.bnbstatic.com/file/resources/img/20180731/image_1533055256274.png"/>
      </swiper-slide>
      <swiper-slide  style="    margin-right: 30px;">
        <img src="https://ex.bnbstatic.com/file/resources/img/20180724/image_1532442418581.png"/>
      </swiper-slide>
      <swiper-slide  style="    margin-right: 30px;">
        <img src="https://ex.bnbstatic.com/file/resources/img/20180724/image_1532445855477.png"/>
      </swiper-slide>
      <swiper-slide  style="    margin-right: 30px;">
        <img src="https://ex.bnbstatic.com/file/resources/img/20180731/image_1533055256274.png"/>
      </swiper-slide>
      <swiper-slide  >
        <img src="https://ex.bnbstatic.com/file/resources/img/20180726/image_1532601949226.png"/>
      </swiper-slide>
      <swiper-slide >
        <img src="https://ex.bnbstatic.com/file/resources/img/20180731/image_1533055256274.png"/>
      </swiper-slide>
      <swiper-slide >
        <img src="https://ex.bnbstatic.com/file/resources/img/20180731/image_1533055256274.png"/>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
    export default {
        name: '',
        components: {
          swiper, swiperSlide
        },
        data() {
            return {
              swiperOption: {
                pagination: {
                  el: '.swiper-pagination',
                  clickable :true,
                },
                slidesPerView: 4,
                slidesPerGroup: 4,
                spaceBetween : 1,
         /*       loop: true,
                loopFillGroupWithBlank: true,*/
              loop: true,
               // slidesPerView: 'auto',
                loopedSlides: 1,
                autoplay:true,

                // some swiper options/callbacks
                // 所有的参数同 swiper 官方 api 参数
                // ...
              }
            }
        },
        created() {
        },
      computed: {
        swiper() {
          return this.$refs.mySwiper.swiper
        }
      },
      mounted() {
        // current swiper instance
        // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
        console.log('this is current swiper instance object', this.swiper)
        this.swiper.pagination.$el.addClass('MyClass');
      },
        methods: {
          callback(){

          }
        }
    }
</script>

<style>
  @import 'swiper/dist/css/swiper.css';
  .swiper{
    width: 1200px;
    margin: auto;
    background: green;

  }
  .container{

  }
  .swiper-container{
    height: 130px;

  }
  .swiper-slide{

  }
  .swiper-slide img{
    width: 100%;
    height: 100%;
  }
  .swiper-pagination{
    padding-top:50px ;
    z-index: 999;
  }
  .swiper-pagination span{
    cursor: pointer;
  }
</style>
<!--文档
https://www.swiper.com.cn/api/grid/198.html-->

<!--dome
https://surmon-china.github.io/vue-awesome-swiper/-->
